<template>
    <div class="w-full flex px-4 border-b-[1px] index-mobile-top">
        <div class="flex items-center justify-center space-x-2 cursor-pointer w-72 h-15">
            <img src="@/assets/logo.png" width="55" />
            <span class="text-xl">
                {{ title }}
            </span>
        </div>
        <el-tabs v-model="activeName" @tab-click="handleClick" :before-leave="handleLeave" class="px-6 index-mobile-tab">
            <el-tab-pane label="首页" name="/"></el-tab-pane>
            <el-tab-pane v-for="(item, i) in categoryTree" :key="i" :label="item.name"
                :name="'/photo?category=' + item.name"></el-tab-pane>
            <el-tab-pane label="我的上传" name="/upload"></el-tab-pane>
        </el-tabs>
        <div class="flex items-center px-6">
            <el-icon class="index-mobile-btn-menu" v-if="!leftMenuActive" :size="22" color="#616161" @click="openLeftMenu">
                <Expand />
            </el-icon>
            <el-icon class="index-mobile-btn-menu" v-if="leftMenuActive" :size="22" color="#616161" @click="openLeftMenu">
                <Fold />
            </el-icon>
        </div>
        <div class="flex items-center justify-end flex-1 index-mobile-btn-login">
            <div>
                <el-button @click="toLoginPage">登录</el-button>
            </div>
        </div>
    </div>
    <div class="mt-4 content">
        <router-view></router-view>
    </div>
    <el-drawer v-model="leftMenuActive" :title="title" direction="ltr" size="200">
        <span>登录</span>
    </el-drawer>
</template>

<script setup>

import { Expand, Fold } from '@element-plus/icons-vue'

import { useStore } from '@/store'
import { testApi } from '@/api/index.api'

const router = useRouter()
const store = useStore()

const title = ref('技术分享系统')

const test = async () => {
    const res = await testApi()
    console.log(res)
}

const leftMenuActive = ref(true)

const activeName = ref('/')

const categoryTree = ref([
    // {
    //     name: '用户管理'
    // }
])

onMounted(() => {

})

//打开左侧菜单
const openLeftMenu = () => {
    leftMenuActive.value = !leftMenuActive.value
}

const handleClick = (tab) => {
    console.log(tab)
    let name = tab.props.name
    let label = tab.props.label
    console.log(name, label)
    if (name === 'git') {
        if (label === 'Gitee') {
            window.open('https://gitee.com/zhangguibin/vip-son-photo', '_blank')
        }
    } if (name === '/upload' && !store.token) {
        toLoginPage()
    }
    else {
        if (name) {
            router.push({
                path: name,
                query: {
                    category: label
                }
            });
        }
    }
}

const handleLeave = (tab) => {
    if (tab === 'git') {
        return new Promise(false)
    }
    if (tab === '/upload' && !store.token) {
        return new Promise(false)
    }
}

const toLoginPage = () => {
    router.push({
        path: '/login'
    });
}

</script>

<style scoped>
::v-deep .el-tabs__header {
    margin: 0;
}

::v-deep .el-tabs {
    --el-tabs-header-height: 3.75rem;
}

::v-deep .el-tabs__nav-wrap::after {
    display: none;
}

@media screen and (max-width: 540px) {
    .index-mobile-top {
        height: 3.75rem;
    }

    .index-mobile-tab {
        display: none;
    }

    .index-mobile-btn-login {
        display: none;
    }

    .index-mobile-btn-menu {
        display: block !important;
    }
}

.content {
    height: calc(100% - 7.5rem);
}

.index-mobile-btn-menu {
    display: none;
}
</style>